<template>
    <div style="text-align: center;horiz-align: center;vertical-align: center;margin-top: 50px">
        <a-card v-if="shopStatus===0||shopStatus===4">
            <a-form :form="form" @submit="submitApplyForm">
                <a-form-item v-bind="formItemLayout" label="身份证正面照">
                    <up-load
                            :common-upload="false"
                            :fieldlName="fieldData.idUrlFront.name"
                            :image-url="fieldData.idUrlFront.url"
                            @change-image-url="changeAndSetUrl"
                            v-decorator="['idUrlFront']"
                    ></up-load>

                </a-form-item>
                <a-form-item v-bind="formItemLayout" label="身份证背面照">
                    <up-load
                            :common-upload="false"
                            :fieldlName="fieldData.idUrlBack.name"
                            :image-url="fieldData.idUrlBack.url"

                            @change-image-url="changeAndSetUrl"
                            v-decorator="['idUrlBack',]"
                    ></up-load>

                </a-form-item>
                <a-form-item v-bind="formItemLayout" label="手持证件照">
                    <up-load
                            :common-upload="false"
                            :fieldlName="fieldData.idUrlHand.name"
                            :image-url="fieldData.idUrlHand.url"

                            @change-image-url="changeAndSetUrl"
                            v-decorator="[ 'idUrlHand']"
                    ></up-load>

                </a-form-item>

                <a-form-item v-bind="tailFormItemLayout">
                    <a-checkbox v-decorator="['agreement', { valuePropName: 'checked' }]">
                        我已经阅读麦猫
                        <a href="">
                            店家协议
                        </a>
                    </a-checkbox>
                </a-form-item>
                <a-form-item v-bind="tailFormItemLayout">
                    <a-button type="primary" html-type="submit">
                        开通店铺
                    </a-button>
                </a-form-item>
            </a-form>
        </a-card>
        <a-result
                v-if="shopStatus===2||shopStatus===3"
                :status="shopStatus===2?'success':'warning'"
                :title="shopStatus===2?'您已成功申请，目前正在审批中，请耐心等待!':'您的店铺已冻结'"
        >
            <template #extra>
                <a-button key="console" type="primary" @click="toHome">
                    返回首页
                </a-button>

            </template>
        </a-result>
    </div>
</template>

<script>
    import UpLoad from "../../../components/upload/UpLoad";
    import userApi from "../../../api/user/userApi";

    export default {
        name: "userApply",
        components: {UpLoad},
        data() {
            return {
                confirmDirty: false,
                autoCompleteResult: [],
                formItemLayout: {
                    labelCol: {
                        xs: {span: 24},
                        sm: {span: 8},
                    },
                    wrapperCol: {
                        xs: {span: 24},
                        sm: {span: 8},
                    },
                },
                tailFormItemLayout: {
                    wrapperCol: {
                        xs: {
                            span: 24,
                            offset: 4,
                        },
                        sm: {
                            span: 12,
                            offset: 5,
                        },
                    },
                },
                fieldData: {
                    idUrlFront: {name: "idUrlFront", url: ""},
                    idUrlBack: {name: "idUrlBack", url: ""},
                    idUrlHand: {name: "idUrlHand", url: ""},
                },
                shopStatus: 0, //0 未开店 1 正常开店 2 申请中 3 冻结中 4 关闭

            }
        },
        beforeCreate() {
            this.form = this.$form.createForm(this, {name: "detailForm"});

        },
        created() {
            this.fetchFormData()
        },
        methods: {
            fetchFormData() {
                userApi.idCardInfo(this.$store.state.user.user.id).then(resp => {
                    let data = resp.data.data
                    console.log(data)
                    this.fieldData.idUrlFront.url = data.idUrlFront
                    this.fieldData.idUrlBack.url = data.idUrlBack
                    this.fieldData.idUrlHand.url = data.idUrlHand
                    this.shopStatus = data.shopStatus;
                    if (this.shopStatus === 1) {
                        this.$router.push("/cell-center")
                    }
                })
            },
            changeAndSetUrl(field, url) {
                console.log(field, url)
                let fieldName = field + ''
                if (field === this.fieldData.idUrlFront.name) {
                    this.fieldData.idUrlFront.url = url
                } else if (fieldName === this.fieldData.idUrlBack.name) {
                    this.fieldData.idUrlBack.url = url
                } else if (fieldName === this.fieldData.idUrlHand.name) {
                    this.fieldData.idUrlHand.url = url
                }
                console.log(this.fieldData)
            },
            submitApplyForm(e) {
                e.preventDefault();
                this.form.validateFields((err, fieldsValue) => {
                    if (!fieldsValue.agreement) {
                        this.$message.warning("请先阅读并同意麦猫卖家协议")
                        return;
                    }
                    if (this.fieldData.idUrlFront.url && this.fieldData.idUrlBack.url && this.fieldData.idUrlHand.url) {
                        console.log("aa")
                        userApi.applyShop().then(resp => {
                            if (resp.data.flag) {
                                this.fetchFormData();
                            }
                        })
                    } else {
                        this.$message.warning("请将三部分的证件照全部上传")
                    }
                })

            },
            toHome() {
                this.$router.push(("/home"))
            }
        }
    }
</script>

<style scoped>

</style>